		#box{
			width: 150px;
			height: 220px;
			margin: 200px auto ;
		}
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		/*给ul添加长宽属性*/
		.page{width: 150px;height: 220px;transition: 0.3s;position: relative;}
		
		/*给所有li绝对定位，并添加圆角和阴影*/
		.page li{position: absolute;left: 0;top: 0;border-radius: 0 8px 8px 0;
		/*圆角顺序为左上、右上、右下、左下 */
		box-shadow: 1px 5px 5px rgba(0,0,0,0.2);}
													
		/*给封面页添加渐变属性和大小*/
		.cover-page{
			z-index: 999999;
			width: 100%; height: 100%;
		background-image: linear-gradient(to top right, #222120,#838382);}
					
		/*给封底页添加渐变属性和大小*/
		.end-page{z-index: 1;background-image: linear-gradient(to top right, #222120,#838382);width: 100%; height: 100%;}
		
		/*给内容页添大小定位以及底色边框*/
		.inside-page{width: 95%; height: 95%; left: 0;top: 3%;
		border: 1px lightgray solid;background-color: #fcf9f4;}
		.page{perspective: 800px;transform-style: preserve-3d;}
		.page li{transform-origin: left;}
		.page li:nth-of-type(1){transform: rotateY(-28deg);}
		.page li:nth-of-type(2){transform: rotateY(-26deg);}
		.page li:nth-of-type(3){transform: rotateY(-24deg);}
		.page li:nth-of-type(4){transform: rotateY(-22deg);}
		.page li:nth-of-type(5){transform: rotateY(-20deg);}
		.page li:nth-of-type(6){transform: rotateY(-18deg);}
		/*横线样式*/
		.inside-page div{width: 100%;height: 20px;
		border-bottom: 1px solid rgba(0,0,0,0.1);}
		/*鼠标离开页面回翻的旋转时间*/
		.page li:nth-of-type(1){transition: 1s;}
		.page li:nth-of-type(2){transition: 0.85s;}
		.page li:nth-of-type(3){transition: 0.7s;}
		.page li:nth-of-type(4){transition: 0.55s;}
		.page li:nth-of-type(5){transition: 0.4s;}
		.page li:nth-of-type(6){transition: 0.25s;}
		
		/*鼠标悬停时的旋转角度和旋转时间*/
		.page:hover{
			transform: translate(50%,0);
			transition: 1s;
		}
		.page:hover li:nth-of-type(1){transform: rotateY(-160deg);transition:1s;}
		.page:hover li:nth-of-type(2){transform: rotateY(-150deg);transition:1.3s;}
		.page:hover li:nth-of-type(3){transform: rotateY(-140deg);transition:1.6s;}
		.page:hover li:nth-of-type(4){transform: rotateY(-130deg);transition:1.9s;}
		.page:hover li:nth-of-type(5){transform: rotateY(-25deg);transition:2.2s;}
		.page:hover li:nth-of-type(6){transform: rotateY(-20deg);transition:2.5s;}

		/* 书本文字居中 */
		.inside-page p{
			text-align: center;
		}
		/* 左页面文字翻转效果 */
		.left-txto{
			 position: absolute;
			 font-size: 80px;
			 left: 20px;
			 transform: rotateY(180deg);
			 width: 80px;
			 height: 80px;
			 top: -5px;
		}
		.left-txtt{
			position: absolute;
			font-size: 80px;
			left: 20px;
			transform: rotateY(180deg);
			width: 80px;
			height: 80px;
			bottom: 25px;
		}